<template>
	<view class="content" >
		<view class="ranking">
			<view class="ranking_three ranking_second">
				<view class="cu-avatar round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);margin-left: 30%;"></view>
				<button class="cu-btn round sm follow_with_interest_btn">关注</button>
				<view class="second public_ranking"></view>
			</view>
			
			<view class="ranking_three ranking_first">
				<view class="cu-avatar round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);margin-left: 30%;"></view>
				<button class="cu-btn round sm follow_with_interest_btn">关注</button>
				<view class="first public_ranking"></view>
			</view>

			<view class="ranking_three ranking_third">
				<view class="cu-avatar round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);margin-left: 30%;"></view>
				<button class="cu-btn round sm follow_with_interest_btn">关注</button>
				<view class="third public_ranking"></view>
			</view>

		</view>
		<view class="list">
            <view class="item">
				<view  class="item-index">4</view>
				<view>
					<image class="cu-avatar round margin-left" src="https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg"></image>
				</view>
				<view class="info">
					<view style="height: 20px;">李四但你</view>
					<view style="height: 20px;color: #666666;font-size: 12px;">好评率98%</view>
				</view>
				<view style="margin-right: 4%;">
					<button class="cu-btn round sm follow_with_interest_btn" style="margin-top: 16%;">关注</button>
				</view>
			</view>
			<view class="item">
				<view  class="item-index">5</view>
				<view>
					<image class="cu-avatar round margin-left" src="https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg"></image>
				</view>
				<view class="info">
					<view style="height: 20px;">李白12434</view>
					<view style="height: 20px;color: #666666;font-size: 12px;">好评率98%</view>
				</view>
				<view style="margin-right: 4%;">
					<button class="cu-btn round sm follow_with_interest_btn" style="margin-top: 16%;">关注</button>
				</view>
			</view>
			<view class="item">
				<view  class="item-index">6</view>
				<view>
					<image class="cu-avatar round margin-left" src="https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg"></image>
				</view>
				<view class="info">
					<view style="height: 20px;">李白13241234</view>
					<view style="height: 20px;color: #666666;font-size: 12px;">好评率98%</view>
				</view>
				<view style="margin-right: 4%;">
					<button class="cu-btn round sm follow_with_interest_btn" style="margin-top: 15%;">关注</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "worker_ranking",
		data() {
			return {

			};
		},
		computed: {
			
		}
	}
</script>

<style>
	.content {
		padding: 0px 4% 0 4%;
		background-image: url("https://img.aibbyp.com/wechat/images/artison/ranking/头部.png");
		background-repeat: repeat;
		background-size: 100% 110%;
	}

	.ranking {
		display: flex;
		flex-direction: row;
		padding-top: 10%;
		height: 33%;
		padding-left: 10%;
		padding-right: 10%;
		height: 380rpx;
	}

	.ranking_avatar {
		width: 40px;
		height: 40px;
		border: 1px solid black;
		border-radius: 50%;
		margin-left: 50upx;
	}
    .follow_with_interest_btn {
		width: 47px;
		height: 21px;
		font-size: 12px;
		margin-left: 25%;
		background: #FF4530;
		color: #FFFFFF;
	}
	.ranking_three {
		width: 33.333%;
	}
	
	.ranking_second {
		padding-top: 15%;
	}
	.ranking_first {
		padding-top: 4%;
	}
	.ranking_third {
		padding-top: 22%;
	}

	.second {
		height: 82.7%;
		margin-top: -33%;
		background-image: url("https://img.aibbyp.com/wechat/images/artison/ranking/微信图片_20231130151512.png");
	}

	.first {
		margin-top: 10%;
		background-image: url("https://img.aibbyp.com/wechat/images/artison/ranking/微信图片_20231130152322.png");
		background-size: 100% 101%;
		margin-left: -1px;
		height: 86.5%;
		margin-top: -32.5%;
	}

	.third {
		
		height: 77.5%;
		margin-top: -31.5%;
		background-image: url("https://img.aibbyp.com/wechat/images/artison/ranking/微信图片_20231130152313.png");
		margin-left: -10upx;
		
	}
    .public_ranking {
		width: 100%;
		background-repeat: no-repeat, repeat;
		background-size: 100% 100%;
	}


	.list {
		width: 100%;
		height: 75%;
		border: 2px solid #FFEBEB;
		border-radius: 10px 10px 0px 0px;
		background: #FFEBEB;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	.item {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 35px;
		margin-top: 5%;
	}
	.item-index {
		left: 0px;
		top: 5px;
		width: 10px;
		opacity: 1;	
		font-family: Source Han Sans;
		font-size: 15px;
		font-weight: 500;
		font-feature-settings: "kern" on;
		line-height: 35px;
		color: #FF5F5F;
		margin-left: 2%;
	}
	.info {
		height: 40px;
		display: flex;
		flex-direction: column;
		margin-left: 3%;
		font-size: 13px;
		font-weight: normal;
		line-height: normal;
		letter-spacing: 0em;		
		font-feature-settings: "kern" on;
		color: #333333;
		width: 56%;
	}
</style>